<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
        <title>frequency decoder ~ Unobtrusive JavaScript datePicker (calendar) widgit demo</title>         
        <script type="text/javascript" src="./js/datepicker.js"></script>
        <link href="./css/demo.css"       rel="stylesheet" type="text/css" />
        <link href="./css/datepicker.css" rel="stylesheet" type="text/css" />
        
<script type="text/javascript">
// <![CDATA[     

// A quick test of the setGlobalVars method - remember, the "lang" attribute will NOT work when passed to this method
datePickerController.setGlobalVars({"split":["-dd","-mm"]});

/* 
        The following function dynamically calculates Easter Monday's date.
        It is used as the "redraw" callback function for the second last calendar on the page
        and returns an empty object.
   
        It dynamically calculates Easter Monday for the year in question and uses
        the "adddisabledDates" method of the datePickercontroller Object to
        disable the date in question.
   
        NOTE: This function is not needed, it is only present to show you how you
        might use this callback function to disable dates dynamically!   
*/            
function disableEasterMonday(argObj) { 
        // Dynamically calculate Easter Monday - I've forgotten where this code 
        // was originally found and I don't even know if it returns a valid
        // result so don't use it in a prod environment...
        var y = argObj.yyyy,
            a=y%4,
            b=y%7,
            c=y%19,
            d=(19*c+15)%30,
            e=(2*a+4*b-d+34)%7,
            m=Math.floor((d+e+114)/31),
            g=(d+e+114)%31+1,            
            yyyymmdd = y + "0" + m + String(g < 10 ? "0" + g : g);         
        
        datePickerController.addDisabledDates(argObj.id, yyyymmdd); 
        
        // The redraw callback expects an Object as a return value
        // so we just give it an empty Object... 
        return {};
};

/* 

        The following functions updates a span with an "English-ised" version of the
        currently selected date for the last datePicker on the page. 
   
        NOTE: These functions are not needed, they are only present to show you how you
        might use callback functions to use the selected date in other ways!
   
*/
function createSpanElement(argObj) {
        // Make sure the span doesn't exist already
        if(document.getElementById("EnglishDate-" + argObj.id)) return;

        // create the span node dynamically...
        var spn = document.createElement('span');
            p   = document.getElementById(argObj.id).parentNode;
            
        spn.id = "EnglishDate-" + argObj.id;
        p.parentNode.appendChild(spn);
        
        // Remove the bottom margin on the input's wrapper paragraph
        p.style.marginBottom = "0";
        
        // Add a whitespace character to the span
        spn.appendChild(document.createTextNode(String.fromCharCode(160)));
};

function showEnglishDate(argObj) {
        // Grab the span & get a more English-ised version of the selected date
        var spn = document.getElementById("EnglishDate-" + argObj.id),
            formattedDate = datePickerController.printFormattedDate(argObj.date, "l-cc-sp-d-S-sp-F-sp-Y", false);
        
        // Make sure the span exists before attempting to use it!
        if(!spn) {
                createSpanElement(argObj); 
                spn = document.getElementById("EnglishDate-" + argObj.id);
        };
        
        // Note: The 3rd argument to printFormattedDate is a Boolean value that 
        // instructs the script to use the imported locale (true) or not (false)
        // when creating the dates. In this case, I'm not using the imported locale
        // as I've used the "S" format mask, which returns the English ordinal
        // suffix for a date e.g. "st", "nd", "rd" or "th" and using an
        // imported locale would look strange if an English suffix was included
        
        // Remove the current contents of the span
        while(spn.firstChild) spn.removeChild(spn.firstChild);
        
        // Add a new text node containing our formatted date
        spn.appendChild(document.createTextNode(formattedDate));
};

      
/* 
 
        Create a datepicker using Javascript and not classNames
        -------------------------------------------------------
      
        datePickerController.createDatePicker has to be called onload as we need 
        the locale file to have loaded before we can create a datepicker.
      
        The only way to get around using an onload event is to 
        explicitly set the language by adding it before the datepicker script e.g:
      
        <script type="text/javascript" src="/the/path/to/the/language/file.js"></ script>
        <script type="text/javascript" src="/the/path/to/the/datepicker/file.js"></ script>
     
*/
            
datePickerController.addEvent(window, "load", function() {
      var opts = {
        // The ID of the associated form element
        id:"dp-js1",
        // The date format to use
        format:"d-sl-m-sl-Y",
        // Days to highlight (starts on Monday)
        highlightDays:[0,0,0,0,0,1,1],
        // Days of the week to disable (starts on Monday)
        disabledDays:[0,0,0,0,0,0,0],
        // Dates to disable (YYYYMMDD format, "*" wildcards excepted)
        disabledDates:{
                "20090601":"20090612", // Range of dates
                "20090622":"1",        // Single date
                "****1225":"1"         // Wildcard example 
                },
        // Date to always enable
        enabledDates:{},
        // Don't fade in the datepicker
        // NOTE: Only relevant if "staticPos" is set to false
        noFadeEffect:false,
        // Is it inline or popup
        staticPos:false,
        // Do we hide the associated form element on create
        hideInput:false,
        // Do we hide the today button
        noToday:true,
        // Do we show weeks along the left hand side
        showWeeks:true,
        // Is it drag disabled
        // NOTE: Only relevant if "staticPos" is set to false
        dragDisabled:true,
        // Positioned the datepicker within a wrapper div of your choice (requires the ID of the wrapper element)
        // NOTE: Only relevant if "staticPos" is set to true
        positioned:"",
        // Do we fill the entire grid with dates
        fillGrid:true,
        // Do we constrain dates not within the current month so that they cannot be selected
        constrainSelection:true,
        // Callback Object
        callbacks:{"create":[createSpanElement], "dateselect":[showEnglishDate]},
        // Do we create the button within a wrapper element of your choice (requires the ID of the wrapper element)
        // NOTE: Only relevant if staticPos is set to false
        buttonWrapper:"",
        // Do we start the cursor on a specific date (YYYYMMDD format string)
        cursorDate:""      
      };
      datePickerController.createDatePicker(opts);
});

// ]]>
</script>
</head>
<body>
<form id="testform" method="post" action="">
  <h1>Unobtrusive JavaScript date-picker widgit v4</h1>
  
  <h2>Keyboard access</h2>
  <p><strong>Note:</strong> All keyboard shortcuts are from the <a href="http://dev.aol.com/dhtml_style_guide#datepicker">The DHTML Style Guide Working Group (DSGWG)</a> recommendations.</p>
  
  <table cellpadding="0" cellspacing="0" border="0" id="fd-dp-aria-describedby">
      <thead>
        <tr>
          <th class="firstup">Key&#160;Combination</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><kbd>&larr;</kbd> <kbd>&rarr;</kbd> <kbd>&uarr;</kbd> <kbd>&darr;</kbd></td>
          <td>Day navigation</td> 
        </tr>
        <tr>
          <td><kbd>page up</kbd></td>
          <td>Previous month</td>
        </tr>
        <tr>
          <td><kbd>page down</kbd></td> 
          <td>Next month</td>
        </tr>
        <tr>
          <td><kbd>Ctrl</kbd> + <kbd>page up</kbd></td>
          <td>Previous year</td>
        </tr>
        <tr>
          <td><kbd>Ctrl</kbd> + <kbd>page down</kbd></td>
          <td>Next year</td>
        </tr>          
        <tr>
          <td><kbd>Space</kbd></td>
          <td>Todays date</td>
        </tr>
        <tr>
          <td><kbd>Esc</kbd></td>
          <td>Close date-picker (no date selected)</td>
        </tr>
        <tr>
          <td><kbd>Return</kbd></td>
          <td>Select highlighted date and close date-picker</td>
        </tr>
        <tr>
          <td><kbd>2</kbd> - <kbd>7</kbd></td>
          <td>Select the corresponding day as the first day of the week</td>
        </tr>
      </tbody>
    </table>
    <h2>DatePicker Demos</h2>
    
    <fieldset>
      <legend>Single Input DatePickers</legend>

      <p>A simple datePicker <em>(don&#8217;t be scared of the <code>dateformat</code> class, it&#8217;s easier to create than you think)</em> :</p>
      <p><code>class=&#8220;dateformat-d-sl-m-sl-Y&#8221;</code></p>
      <label for="dp-1">Date</label> :
      <p><input type="text" class="w16em dateformat-d-sl-m-sl-Y" id="dp-1" name="dp-1" value="13/03/2009" /></p>
    
      <p class="fauxhr">OK, the same datepicker as above but now let&#8217;s show some week numbers and change the date format slightly in order to display two figure years:</p>
      <p><code>class=&#8220;dateformat-d-sl-m-sl-<strong>y show-weeks</strong>&#8221;</code></p>
      <label for="dp-2">Date</label> :
      <p><input type="text" class="w16em dateformat-d-sl-m-sl-y show-weeks" id="dp-2" name="dp-2" value="" /></p>

      <p class="fauxhr">Add a status bar and change the date format to use a four figure year and dashes as the date dividor:</p>
      <p><code>class=&#8220;show-weeks <strong>dateformat-d-ds-m-ds-Y statusformat-l-cc-sp-d-sp-F-sp-Y</strong>&#8221;</code></p>
      <label for="dp-3">Date</label> :
      <p><input type="text" class="w16em dateformat-d-ds-m-ds-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y" id="dp-3" name="dp-3" value="" /></p>

      <p class="fauxhr">Let&#8217;s highlight Monday &amp; Tuesday:</p>
      <p><code>class=&#8220;show-weeks dateformat-d-ds-m-ds-Y statusformat-l-cc-sp-d-sp-F-sp-Y <strong>highlight-days-12</strong>&#8221;</code></p>
      <label for="dp-4">Date</label> :
      <p><input type="text" class="w16em dateformat-d-ds-m-ds-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y highlight-days-12" id="dp-4" name="dp-4" value="" /></p>

      <p class="fauxhr">Now we&#8217;ll remove the day highlight set previously, set a top &amp; bottom date range and change the date format to use forward slashes as the date dividor:</p>
      <p><code>class=&#8220;show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y <strong>dateformat-d-sl-m-sl-Y range-low-5-week range-high-1-year</strong>&#8221;</code></p>
      <label for="dp-5">Date</label> :
      <p><input type="text" class="w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y highlight-days-67 range-low-5-week range-high-1-year" id="dp-5" name="dp-5" value="" /></p>

      <p class="fauxhr">Let&#8217;s disable the drag &amp; drop functionality:</p>
      <p><code>class=&#8220;dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y <strong>disable-drag</strong>&#8221;</code></p>
      <label for="dp-6">Date</label> :
      <p><input type="text" class="w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y  disable-drag" id="dp-6" name="dp-6" value="" /></p>

      <p class="fauxhr">Let&#8217;s fill the entire grid with selectable dates:</p>
      <p><code>class=&#8220;dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y <strong>fill-grid</strong>&#8221;</code></p>
      <label for="dp-7">Date</label> :
      <p><input type="text" class="w16em w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y fill-grid" id="dp-7" name="dp-7" value="" /></p>

      <p class="fauxhr">Let&#8217;s fill the entire grid again but we&#8217;ll disable the selection of the extra dates:</p>
      <p><code>class=&#8220;w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y <strong>fill-grid-no-select</strong>&#8221;</code></p>
      <label for="dp-8">Date</label> :
      <p><input type="text" class="w16em w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y fill-grid-no-select" id="dp-8" name="dp-8" value="" /></p>

      <p class="fauxhr">Let&#8217;s set a bespoke final opacity of 80%:</p>
      <p><code>class=&#8220;w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y <strong>opacity-80</strong>&#8221;</code></p>
      <label for="dp-9">Date</label> :
      <p><input type="text" class="w16em w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y  opacity-80" id="dp-9" name="dp-9" value="" /></p>
      
      <p class="fauxhr">Let&#8217;s now disable the fade in/out animation:</p>
      <p><code>class=&#8220;w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y <strong>no-animation</strong>&#8221;</code></p>
      <label for="dp-10">Date</label> :
      <p><input type="text" class="w16em w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y no-animation" id="dp-10" name="dp-10" value="" /></p>

      <p class="fauxhr">Just for fun, let&#8217;s now disable some specific dates using wildcards and a date range:</p>
      <p><code>class=&#8220;w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y <strong>disable-xxxx1225 disable-20070201-20070222</strong>&#8221;</code></p>
      <label for="dp-11">Date</label> :
      <p><input type="text" class="w16em w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y disable-xxxx1225 disable-20070201-20070222" id="dp-11" name="dp-11" value="" /></p>

      <p class="fauxhr">Now we&#8217;ll enable a few of the dates we&#8217;ve just disabled (enabled dates take preference over disabled dates):</p>
      <p><code>class=&#8220;w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y disable-xxxx1225 disable-20070201-20070222 <strong>enable-20070205-20070209</strong>&#8221;</code></p>
      <label for="dp-12">Date :</label>
      <p><input type="text" class="w16em w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y disable-xxxx1225 disable-20070201-20070222 enable-20070205-20070209" id="dp-12" name="dp-12" value="" /></p>

      <p class="fauxhr">Now we&#8217;ll disable all Sundays and enable a range of dates that includes four Sundays (enabled dates take preference over disabled days) and set the cursor to start on the 1<sup>st</sup> February 2009:</p>
      <p><code>class=&#8220;w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y <strong>disable-days-7</strong> enable-20090201-20090222 cursor-20090201&#8221;</code></p>
      <label for="dp-14">Date :</label>
      <p><input type="text" class="w16em w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y disable-days-7 enable-20090201-20090222 cursor-20090201" id="dp-14" name="dp-14" value="" /></p>

      <p class="fauxhr">Now we&#8217;ll set a more complicated dateformat (which you probably wouldn&#8217;t use in a real life situation but it will at least test the script&#8217;s ability to parse complicated dates):</p>
      <p><code>class=&#8220;<strong>dateformat-l-cc-sp-d-sp-F-sp-Y</strong> show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y&#8221;</code></p>
      <label for="dp-13">Date</label> :
      <p><input type="text" class="w16em dateformat-l-cc-sp-d-sp-F-sp-Y show-weeks statusformat-l-cc-sp-d-sp-F-sp-Y" id="dp-13" name="dp-13" value="" /></p>

    </fieldset>
    
    <fieldset>
      <legend>Split Input DatePickers</legend>
      <p>Using three text inputs and disabling the today button:</p>
      <p><code>class="split-date fill-grid statusformat-l-cc-sp-d-sp-F-sp-Y show-weeks <strong>no-today-button</strong>"</code></p>
      <!--
      Standards evangelists beware, I'm using a table for layout...
      Please send all comments/suggestions to itsOnlyABleedenDemoSoPleaseChillOut@frequency-decoder.com
      !-->
      <table class="split-date-wrap" cellpadding="0" cellspacing="0" border="0">
        <tbody>
          <tr>
            <td><input type="text" class="w2em" id="date-1-dd" name="date-1-dd" value="" maxlength="2" />/<label for="date-1-dd">DD</label></td>
            <td><input type="text" class="w2em" id="date-1-mm" name="date-1-mm" value="" maxlength="2" />/<label for="date-1-mm">MM</label></td>
            <td class="lastTD"><input type="text" class="w4em split-date fill-grid statusformat-l-cc-sp-d-sp-F-sp-Y show-weeks no-today-button" id="date-1" name="date-1" value="" maxlength="4" /><label for="date-1">YYYY</label></td>
          </tr>
        </tbody>
      </table>  
      <p class="fauxhr">Using three text inputs &amp; positioning the button within a wrapper span:</p>
      <p><code>class="split-date statusformat-l-cc-sp-d-sp-F-sp-Y show-weeks <strong>button-butt-wrapper</strong>"</code></p>
      
      <table class="split-date-wrap" cellpadding="0" cellspacing="0" border="0">
        <tbody>
          <tr>
            <td><input type="text" class="w4em split-date statusformat-l-cc-sp-d-sp-F-sp-Y show-weeks button-butt-wrapper" id="date-2" name="date-2" value="" maxlength="4" />/<label for="date-2">YYYY</label></td>
            <td><input type="text" class="w2em" id="date-2-mm" name="date-2-mm" value="" maxlength="2" />/<label for="date-2-mm">MM</label></td>
            <td><input type="text" class="w2em" id="date-2-dd" name="date-2-dd" value="" maxlength="2" style="margin-right:0" /><span id="butt-wrapper"></span><label for="date-2-dd">DD</label></td>
          </tr>
        </tbody>
      </table>  
         
      <p class="fauxhr">Using 3 selectLists, disabling Monday and Tuesaday and setting a low range:</p>
      <p><code>class="disable-days-12 split-date range-low-19600213"</code></p>
      <p><strong>Note:</strong> I&#8217;ve set the lower limit of the datePicker to be (ten years) lower than the lowest possible year you can select using the year selectList in order to test the automatic resetting of the lower/higher date ranges i.e. the year selectList starts at 1970 but the className defined range has been stipulated as 1960; the datePicker should automatically reset the range to be <code>range-low-<strong>1970</strong>-02-13</code>.</p>
      <p>
        <select id="date-sel-dd" name="date-sel-dd">
          <option value="-1">Day</option>
          <option value="1">1st</option>
          <option value="2">2nd</option>
          <option value="3">3rd</option>
          <option value="4">4th</option>
          <option value="5">5th</option>
          <option value="6">6th</option>
          <option value="7">7th</option>
          <option value="8">8th</option>
          <option value="9">9th</option>
          <option value="10">10th</option>
          <option value="11">11th</option>
          <option value="12">12th</option>
          <option value="13">13th</option>
          <option value="14">14th</option>
          <option value="15">15th</option>
          <option value="16">16th</option>
          <option value="17">17th</option>
          <option value="18">18th</option>
          <option value="19">19th</option>
          <option value="20">20th</option>
          <option value="21">21st</option>
          <option value="22">22nd</option>
          <option value="23">23rd</option>
          <option value="24">24th</option>
          <option value="25">25th</option>
          <option value="26">26th</option>
          <option value="27">27th</option>
          <option value="28">28th</option>
          <option value="29">29th</option>
          <option value="30">30th</option>
          <option value="31">31st</option>
        </select>
        <select id="date-sel-mm" name="date-sel-mm">
          <option value="-1">Month</option>
          <option value="1">January</option>
          <option value="2">February</option>
          <option value="3">March</option>
          <option value="4">April</option>
          <option value="5">May</option>
          <option value="6">June</option>
          <option value="7">July</option>
          <option value="8">August</option>
          <option value="9">September</option>
          <option value="10">October</option>
          <option value="11">November</option>
          <option value="12">December</option>
        </select>
        <select class="split-date range-low-19600213 disable-days-12" id="date-sel" name="date-sel">
          <option value="-1">Year</option>
          <option value="1970">1970</option>
          <option value="1971">1971</option>
          <option value="1972">1972</option>
          <option value="1973">1973</option>
          <option value="1974">1974</option>
          <option value="1975">1975</option>
          <option value="1976">1976</option>
          <option value="1977">1977</option>
          <option value="1978">1978</option>
          <option value="1979">1979</option>
          <option value="1980">1980</option>
          <option value="1981">1981</option>
          <option value="1982">1982</option>
          <option value="1983">1983</option>
          <option value="1984">1984</option>
          <option value="1985">1985</option>
          <option value="1986">1986</option>
          <option value="1987">1987</option>
          <option value="1988">1988</option>
          <option value="1989">1989</option>
          <option value="1990">1990</option>
        </select>
      </p>
    
      <p>Using a mixture of text input and selectLists:</p>
      <p><code>class="split-date"</code></p>
      <div id="select-wrapper">
        <select id="date-sel2-dd" name="date-sel2-dd">
          <option value="day">Day</option>
          <option value="1">1st</option>
          <option value="2">2nd</option>
          <option value="3">3rd</option>
          <option value="4">4th</option>
          <option value="5">5th</option>
          <option value="6">6th</option>
          <option value="7">7th</option>
          <option value="8">8th</option>
          <option value="9">9th</option>
          <option value="10">10th</option>
          <option value="11">11th</option>
          <option value="12">12th</option>
          <option value="13">13th</option>
          <option value="14">14th</option>
          <option value="15">15th</option>
          <option value="16">16th</option>
          <option value="17">17th</option>
          <option value="18">18th</option>
          <option value="19">19th</option>
          <option value="20">20th</option>
          <option value="21">21st</option>
          <option value="22">22nd</option>
          <option value="23">23rd</option>
          <option value="24">24th</option>
          <option value="25">25th</option>
          <option value="26">26th</option>
          <option value="27">27th</option>
          <option value="28">28th</option>
          <option value="29">29th</option>
          <option value="30">30th</option>
          <option value="31">31st</option>
        </select>
        <select id="date-sel2-mm" name="date-sel2-mm">
          <option value="-1">Month</option>
          <option value="1">January</option>
          <option value="2">February</option>
          <option value="3">March</option>
          <option value="4">April</option>
          <option value="5">May</option>
          <option value="6">June</option>
          <option value="7">July</option>
          <option value="8">August</option>
          <option value="9">September</option>
          <option value="10">October</option>
          <option value="11">November</option>
          <option value="12">December</option>
        </select>
        <input type="text" class="w3em split-date" id="date-sel2" name="date-sel2" />
      </div>
    </fieldset>
    <fieldset>
      <legend>Single Input in-line DatePickers</legend>   

      <p>A simple datePicker:</p>
      <p><code>class=&#8220;display-inline dateformat-Y-ds-m-ds-d&#8221;</code></p>       
      <label for="dp-s1">Date</label> :
      <div><input type="text" class="w18em display-inline dateformat-Y-ds-m-ds-d" id="dp-s1" name="dp-s1" value="" /></div>

      <p class="fauxhr">OK, the same datepicker as above but now let&#8217;s show some week numbers, add a status bar and set a top and bottom range:</p>
      <p><code>class=&#8220;display-inline dateformat-Y-ds-m-ds-d <strong>show-weeks range-low-1-week range-high-1-month statusformat-l-cc-sp-d-sp-F-sp-Y</strong>&#8221;</code></p>
      <label for="dp-s2">Date</label> :
      <div><input type="text" class="w18em display-inline dateformat-Y-ds-m-ds-d show-weeks range-low-1-week range-high-1-month statusformat-l-cc-sp-d-sp-F-sp-Y" id="dp-s2" name="dp-s2" value="" /></div>

    </fieldset>
    <fieldset>
      <legend>Disable/enable demos</legend>       

      <label for="dp-de1">Date</label> :
      <p>Testing to see if the activation button has been automatically disabled (as the associated form element is disabled):</p>
      <p><input type="text" disabled="disabled" class="w16em dateformat-d-sl-m-sl-Y" id="dp-de1" name="dp-de1" value="" /></p>

      <p class="fauxhr">Testing to see how a popup datePicker reacts to dynamic disabling/enabling:</p>
      <label for="dp-de2">Date</label> :
      <p><input type="text" class="w16em dateformat-d-sl-m-sl-Y" id="dp-de2" name="dp-de2" value="" /></p> 
      <button onclick="datePickerController.disable('dp-de2'); return false;">Disable</button>
      <button onclick="datePickerController.enable('dp-de2'); return false;">Enable</button>           

      <p class="fauxhr">Testing to see how an inline datePicker reacts to dynamic disabling/enabling:</p>
      <label for="dp-de3">Date</label> :
      <p><input type="text" class="w16em dateformat-d-sl-m-sl-Y show-weeks display-inline" id="dp-de3" name="dp-de3" value="" /></p>
      <button onclick="datePickerController.disable('dp-de3'); return false;">Disable</button>
      <button onclick="datePickerController.enable('dp-de3'); return false;">Enable</button>           

    </fieldset> 
    <fieldset>
      <legend>Callback function demos</legend>       
      <p>A simple datePicker with a callback function <code>disableEasterMonday</code> defined for the redraw event (that dynamicaly calculates Easter Monday for the given year and disables that date in question - view the page source to see the function in question):</p>
      <p><code>class=&#8220;dateformat-d-sl-m-sl-Y <strong>cb_redraw_disableEasterMonday</strong>&#8221;</code></p>
      <label for="dp-cb1">Date</label> :
      <p><input type="text" class="w16em dateformat-d-sl-m-sl-Y cb_redraw_disableEasterMonday" id="dp-cb1" name="dp-cb1" value="" /></p>

      <p class="fauxhr">A simple datePicker with two callback functions <code>createSpanElement</code> (defined for the create event) and <code>showEnglishDate</code> (defined for the dateselect event) that use the <code>datePickerController.parseDate</code> method to return a more natural English language date which is then rewritten under the associated input - view the page source to see the two functions in question:</p>
      <p><code>class=&#8220;dateformat-d-sl-m-sl-Y <strong>cb_create_createSpanElement cb_dateselect_showEnglishDate</strong>&#8221;</code></p>
      <label for="dp-cb2">Date</label> :
      <p><input type="text" class="w16em dateformat-d-sl-m-sl-Y cb_create_createSpanElement cb_dateselect_showEnglishDate" id="dp-cb2" name="dp-cb2" value="" /></p>      
    </fieldset>
    
    <fieldset>
      <legend>Create using Javascript</legend>       
      <p>A simple datePicker created using a JavaScript call that defines the same two callback functions <code>createSpanElement</code> (defined for the create event) and <code>showEnglishDate</code> (defined for the dateselect event) that were used above:</p>
      <label for="dp-js1" id="l-dp-js1">Date</label> :
      <p><input type="text" class="w16em" id="dp-js1" name="dp-js1" value="" /></p>   
    </fieldset>
    <p class="al-center">View the related &#8220;<a href="http://www.frequency-decoder.com/2009/02/03/unobtrusive-date-picker-widget-v4/">language in the lab</a>&#8221; post for this demo.</p>
</form>
</body>
</html>

